<template>
  <div>
    <el-input
      v-model="input"
      placeholder="输入车牌查询"
      clearable
      class="w-50 m-2"
      size="small"
      style="width: 50%; position: relative; top: 40px; left: 20px"
    />
    <el-descriptions
      v-if="name?.length > 0"
      style="
        position: relative;
        top: 60px;
        left: 0;
        box-sizing: border-box;
        padding: 0px 15px;
      "
    >
      <el-descriptions-item label="姓名">{{ name }}</el-descriptions-item>
      <el-descriptions-item label="车牌">{{ card }}</el-descriptions-item>
      <el-descriptions-item label="缴费">
        <el-tag :type="tag === '是' ? 'success' : 'error'" size="small">{{
          tag === "是" ? "已缴费" : "未缴费"
        }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="住址">{{ address }}</el-descriptions-item>
    </el-descriptions>
    <div
      v-else
      style="
        font-size: 14px;
        display: flex;
        flex-direction: column;
        margin-top: 80px;
        margin-left: 20px;
      "
    >
      <span>NO DATA...</span>
      <dv-decoration-3 style="width: 100px; height: 30px" />
    </div>
  </div>
</template>

<script>
import { computed, ref, watch, reactive, toRefs } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    let store = useStore();

    const input = ref("");

    const list = reactive({
      name: "",
      card: "",
      tag: "",
      address: "",
    });
    watch(input, (newValue, oldValue) => {
      console.log("input变化", newValue);
      store.commit("CarData/SET_INPUT", newValue);
      const filterList = computed(() => store.state.CarData.filterList);
      list.name = filterList.value[1];
      list.card = filterList.value[2];
      list.tag = filterList.value[3];
      list.address = filterList.value[4];
      if (newValue.length === 0) {
        list.name = "";
      }
    });

    // 查询过滤
    console.log(list.name, "name");

    return {
      input,
      ...toRefs(list),
    };
  },
};
</script>

<style lang="scss">
.el-descriptions__table tr,
.el-descriptions__table td,
.el-descriptions__cell {
  background-color: transparent !important;
  color: #eee;
}
.el-descriptions__body {
  background-color: transparent;
  color: #eee;
}
.el-descriptions__label {
  color: #eee !important;
}
.el-descriptions__content {
  color: #eee !important;
}
</style>
